<template>
  <div class="org-member-tree h100">
    <div class="filter__box">
      <el-input
        placeholder="输入关键字过滤"
        size="mini"
        class="inline-input"
        v-model="filterText"
        suffix-icon="el-icon-search"
        clearable
      ></el-input>
    </div>
    <div class="tree__box">
      <el-tree
        class="filter-tree"
        :data="data"
        :props="props"
        :filter-node-method="filterNode"
        :expand-on-click-node="clickExpand"
        highlight-current
        :default-expand-all="defaultExpand"
        :node-key="nodeKey"
        :default-expanded-keys="expandKeys"
        @node-click="treeNodeClick"
        ref="tree"
      ></el-tree>
    </div>
  </div>
</template>

<script>
import PinyinMatch from "pinyin-match";
export default {
  props: {
    treeData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    defaultProps: {
      type: Object,
      default: () => {
        return { children: "children", label: "label" };
      },
    },
    clickExpand: {
      type: Boolean,
      default: true,
    },
    defaultExpand: {
      type: Boolean,
      default: false,
    },
    defaultExpandKeys: {
      type: Array,
      default: () => {
        return [];
      },
    },
    nodeKey: {
      type: String,
      default: "id",
    },
  },
  data() {
    return {
      filterText: "",
      props: {},
      data: [],
    };
  },
  computed: {
    expandKeys() {
      if (this.defaultExpandKeys.length) {
        return this.defaultExpandKeys;
      } else if (this.data.length) {
        let id = this.nodeKey || "id";
        return [this.data[0][id]];
      } else {
        return [];
      }
    },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.data = JSON.parse(JSON.stringify(this.treeData));
      this.props = Object.assign({}, this.defaultProps);
    },
    filterNode(value, data) {
      if (!value) return true;
      let label = data[this.props.label];
      return label.indexOf(value) !== -1 || PinyinMatch.match(label, value);
    },
    treeNodeClick(node) {
      this.$emit("handleClickTree", node);
    },
    setNoNode() {
      this.$refs.tree.setCurrentKey(null);
    },
    getCurrentKey() {
      return this.$refs.tree.getCurrentKey();
    },
    setCurrentKey(id) {
      setTimeout(() => {
        this.$refs.tree.setCurrentKey(id);
      }, 200);
    },
    //设置树数据
    setTreeData(data) {
      this.$set(this, "data", data);
    },
  },
};
</script>

<style>
.org-member-tree
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  /* background-color: #bedaf9 !important; */
}
</style>

<style lang="less" scoped>
.org-member-tree {
  .treeInput {
    width: 100%;
  }
  .filter__box {
    width: 70%;
    padding: 4px;
  }
  .tree__box {
    width: 100%;
    height: calc(100% - 56px);
    //min-width: 180px;
    overflow-x: auto;
  }
  .el-tree {
    width: 100%;
    /deep/ .el-tree-node.is-expanded > .el-tree-node__children {
      display: inline;
    }
  }
}
</style>